```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>销售管理AI - 系统仪表盘</title>
    <link href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        .glass-card {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.18);
        }
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 10px;
            padding: 12px 24px;
            transition: all 0.3s ease;
            color: white;
            border: none;
            cursor: pointer;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        }
        .kpi-card {
            transition: all 0.3s ease;
        }
        .kpi-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
        }
        .notification-item {
            transition: all 0.3s ease;
            border-left: 4px solid transparent;
        }
        .notification-item:hover {
            border-left-color: #4f46e5;
            background: rgba(79, 70, 229, 0.05);
        }
        .quick-action-card {
            transition: all 0.3s ease;
            cursor: pointer;
        }
        .quick-action-card:hover {
            transform: translateY(-3px);
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
        }
        .chart-container {
            height: 300px;
        }
        @media (max-width: 768px) {
            .chart-container {
                height: 250px;
            }
        }
    </style>
</head>
<body class="min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <nav class="bg-white bg-opacity-90 backdrop-blur-lg shadow-sm py-4 px-6">
        <div class="container mx-auto flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fas fa-chart-line text-2xl" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"></i>
                <span class="text-xl font-bold text-gray-800">销售管理AI</span>
            </div>
            <div class="flex items-center space-x-6">
                <a href="#" class="text-gray-700 hover:text-purple-600 transition-colors">仪表盘</a>
                <a href="#" class="text-gray-700 hover:text-purple-600 transition-colors">客户管理</a>
                <a href="#" class="text-gray-700 hover:text-purple-600 transition-colors">销售机会</a>
                <a href="#" class="text-gray-700 hover:text-purple-600 transition-colors">业绩分析</a>
                <div class="flex items-center space-x-3">
                    <div class="relative">
                        <i class="fas fa-bell text-gray-600 text-lg"></i>
                        <span class="absolute -top-1 -right-1 bg-red-500 text-white rounded-full w-4 h-4 text-xs flex items-center justify-center">3</span>
                    </div>
                    <div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-400 to-blue-500 flex items-center justify-center text-white font-semibold">张</div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容区 -->
    <main class="flex-grow container mx-auto px-4 py-8">
        <!-- 页面标题和欢迎语 -->
        <div class="mb-8">
            <h1 class="text-3xl font-bold text-white mb-2">销售仪表盘</h1>
            <p class="text-white text-opacity-80">欢迎回来，张三！今天是2023年11月15日，祝您工作愉快！</p>
        </div>

        <!-- KPI指标卡片区 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <div class="glass-card kpi-card p-6">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-gray-500 text-sm">本月销售额</p>
                        <h3 class="text-2xl font-bold text-gray-800 mt-1">¥1,248,560</h3>
                        <p class="text-green-500 text-sm mt-2"><i class="fas fa-arrow-up mr-1"></i> 12.5% 同比增长</p>
                    </div>
                    <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center">
                        <i class="fas fa-dollar-sign text-green-500 text-xl"></i>
                    </div>
                </div>
            </div>

            <div class="glass-card kpi-card p-6">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-gray-500 text-sm">新增客户</p>
                        <h3 class="text-2xl font-bold text-gray-800 mt-1">248</h3>
                        <p class="text-green-500 text-sm mt-2"><i class="fas fa-arrow-up mr-1"></i> 8.3% 环比增长</p>
                    </div>
                    <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
                        <i class="fas fa-user-plus text-blue-500 text-xl"></i>
                    </div>
                </div>
            </div>

            <div class="glass-card kpi-card p-6">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-gray-500 text-sm">转化率</p>
                        <h3 class="text-2xl font-bold text-gray-800 mt-1">24.8%</h3>
                        <p class="text-orange-500 text-sm mt-2"><i class="fas fa-minus mr-1"></i> 2.1% 环比下降</p>
                    </div>
                    <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center">
                        <i class="fas fa-chart-pie text-purple-500 text-xl"></i>
                    </div>
                </div>
            </div>

            <div class="glass-card kpi-card p-6">
                <div class="flex justify-between items-start">
                    <div>
                        <p class="text-gray-500 text-sm">AI预测准确率</p>
                        <h3 class="text-2xl font-bold text-gray-800 mt-1">89.2%</h3>
                        <p class="text-green-500 text-sm mt-2"><i class="fas fa-arrow-up mr-1"></i> 5.7% 模型优化</p>
                    </div>
                    <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center">
                        <i class="fas fa-robot text-indigo-500 text-xl"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- 图表和快捷操作区 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
            <!-- 销售趋势图表 -->
            <div class="glass-card p-6 lg:col-span-2">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-xl font-semibold text-gray-800">销售趋势分析</h2>
                    <div class="flex space-x-2">
                        <button class="px-3 py-1 text-sm rounded-lg bg-gray-100 text-gray-700">月度</button>
                        <button class="px-3 py-1 text-sm rounded-lg bg-gradient-to-r from-purple-500 to-blue-500 text-white">季度</button>
                        <button class="px-3 py-1 text-sm rounded-lg bg-gray-100 text-gray-700">年度</button>
                    </div>
                </div>
                <div id="salesChart" class="chart-container"></div>
            </div>

            <!-- 快捷操作入口 -->
            <div class="glass-card p-6">
                <h2 class="text-xl font-semibold text-gray-800 mb-4">快捷操作</h2>
                <div class="grid grid-cols-2 gap-4">
                    <div class="quick-action-card p-4 rounded-xl border border-gray-100 text-center">
                        <div class="w-12 h-12 mx-auto mb-2 rounded-full bg-blue-100 flex items-center justify-center">
                            <i class="fas fa-users text-blue-500 text-xl"></i>
                        </div>
                        <p class="text-gray-700 font-medium">客户管理</p>
                    </div>
                    <div class="quick-action-card p-4 rounded-xl border border-gray-100 text-center">
                        <div class="w-12 h-12 mx-auto mb-2 rounded-full bg-green-100 flex items-center justify-center">
                            <i class="fas fa-bullseye text-green-500 text-xl"></i>
                        </div>
                        <p class="text-gray-700 font-medium">销售机会</p>
                    </div>
                    <div class="quick-action-card p-4 rounded-xl border border-gray-100 text-center">
                        <div class="w-12 h-12 mx-auto mb-2 rounded-full bg-purple-100 flex items-center justify-center">
                            <i class="fas fa-chart-bar text-purple-500 text-xl"></i>
                        </div>
                        <p class="text-gray-700 font-medium">业绩分析</p>
                    </div>
                    <div class="quick-action-card p-4 rounded-xl border border-gray-100 text-center">
                        <div class="w-12 h-12 mx-auto mb-2 rounded-full bg-orange-100 flex items-center justify-center">
                            <i class="fas fa-lightbulb text-orange-500 text-xl"></i>
                        </div>
                        <p class="text-gray-700 font-medium">AI推荐</p>
                    </div>
                </div>
                <button class="btn-primary w-full mt-6 flex items-center justify-center">
                    <i class="fas fa-plus mr-2"></i> 新建销售机会
                </button>
            </div>
        </div>

        <!-- 消息通知和AI洞察 -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- 实时消息通知 -->
            <div class="glass-card p-6">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-xl font-semibold text-gray-800">实时消息通知</h2>
                    <span class="text-sm text-purple-600">3条未读</span>
                </div>
                <div class="space-y-4">
                    <div class="notification-item p-3 rounded-lg bg-white bg-opacity-50">
                        <div class="flex items-start">
                            <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-3 mt-1">
                                <i class="fas fa-check-circle text-green-500"></i>
                            </div>
                            <div>
                                <p class="text-gray-800 font-medium">销售机会已成交</p>
                                <p class="text-gray-600 text-sm">客户「科技无限公司」的200万订单已完成签约</p>
                                <p class="text-gray-400 text-xs mt-1">10分钟前</p>
                            </div>
                        </div>
                    </div>
                    <div class="notification-item p-3 rounded-lg bg-white bg-opacity-50">
                        <div class="flex items-start">
                            <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3 mt-1">
                                <i class="fas fa-exclamation-circle text-blue-500"></i>
                            </div>
                            <div>
                                <p class="text-gray-800 font-medium">AI风险预警</p>
                                <p class="text-gray-600 text-sm">检测到3个高价值客户近期互动减少，建议及时跟进</p>
                                <p class="text-gray-400 text-xs mt-1">1小时前</p>
                            </div>
                        </div>
                    </div>
                    <div class="notification-item p-3 rounded-lg bg-white bg-opacity-50">
                        <div class="flex items-start">
                            <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-3 mt-1">
                                <i class="fas fa-bell text-purple-500"></i>
                            </div>
                            <div>
                                <p class="text-gray-800 font-medium">系统提醒</p>
                                <p class="text-gray-600 text-sm">季度销售报告已生成，请及时查看</p>
                                <p class="text-gray-400 text-xs mt-1">3小时前</p>
                            </div>
                        </div>
                    </div>
                </div>
                <button class="text-purple-600 text-sm font-medium mt-4 flex items-center">
                    查看全部消息 <i class="fas fa-arrow-right ml-1"></i>
                </button>
            </div>

            <!-- AI智能洞察 -->
            <div class="glass-card p-6">
                <h2 class="text-xl font-semibold text-gray-800 mb-4">AI智能洞察</h2>
                <div class="bg-gradient-to-r from-purple-50 to-blue-50 rounded-xl p-4 mb-4">
                    <div class="flex items-start">
                        <div class="w-10 h-10 rounded-full bg-gradient-to-r from-purple-400 to-blue-500 flex items-center justify-center mr-3">
                            <i class="fas fa-robot text-white"></i>
                        </div>
                        <div>
                            <p class="text-gray-800 font-medium">销售预测提醒</p>
                            <p class="text-gray-600 text-sm">基于历史数据模型，预测本月销售额将超额完成15%，建议重点关注高转化率产品线。</p>
                        </div>
                    </div>
                </div>
                <div class="bg-gradient-to-r from-green-50 to-teal-50 rounded-xl p-4">
                    <div class="flex items-start">
                        <div class="w-10 h-10 rounded-full bg-gradient-to-r from-green-400 to-teal-500 flex items-center justify-center mr-3">
                            <i class="fas fa-chart-line text-white"></i>
                        </div>
                        <div>
                            <p class="text-gray-800 font-medium">客户行为分析</p>
                            <p class="text-gray-600 text-sm">发现科技行业客户活跃度提升23%，建议增加相关行业的产品推广力度。</p>
                        </div>
                    </div>
                </div>
                <button class="btn-primary w-full mt-6 flex items-center justify-center">
                    <i class="fas fa-brain mr-2"></i> 查看详细分析报告
                </button>
            </div>
        </div>
    </main>

    <script>
        // 初始化ECharts图表
        document.addEventListener('DOMContentLoaded', function() {
            // 销售趋势图表
            const salesChart = echarts.init(document.getElementById('salesChart'));
            const salesOption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['实际销售额', '预测销售额', '去年同期'],
                    textStyle: {
                        color: '#475569'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    axisLine: {
                        lineStyle: {
                            color: '#cbd5e1'
                        }
                    },
                    axisLabel: {
                        color: '#64748b'
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#cbd5e1'
                        }
                    },
                    axisLabel: {
                        color: '#64748b',
                        formatter: '{value} 万'
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#f1f5f9',
                            type: 'dashed'
                        }
                    }
                },
                series: [
                    {
                        name: '实际销售额',
                        type: 'bar',
                        barWidth: '30%',
                        data: [120, 132, 101, 134, 90, 130, 145, 162, 148, 135, 160, 175],
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#667eea'},
                                {offset: 1, color: '#764ba2'}
                            ])
                        }
                    },
                    {
                        name: '预测销售额',
                        type: 'line',
                        data: [110, 125, 105, 130, 100, 125, 140, 155, 145, 140, 155, 170],
                        symbol: 'circle',
                        symbolSize: 8,
                        lineStyle: {
                            width: 3,
                            color: '#10b981'
                        },
                        itemStyle: {
                            color: '#10b981',
                            borderColor: '#fff',
                            borderWidth: 2
                        }
                    },
                    {
                        name: '去年同期',
                        type: 'line',
                        data: [95, 110, 90, 115, 85, 105, 120, 135, 125, 115, 130, 145],
                        symbol: 'circle',
                        symbolSize: 8,
                        lineStyle: {
                            width: 2,
                            type: 'dashed',
                            color: '#f59e0b'
                        },
                        itemStyle: {
                            color: '#f59e0b'
                        }
                    }
                ]
            };
            salesChart.setOption(salesOption);

            // 响应式调整
            window.addEventListener('resize', function() {
                salesChart.resize();
            });
        });
    </script>
</body>
</html>
```